<style>
	fieldset.fieldset-border {
		border: 1px groove #ddd !important;
		padding: 0 1.4em 1.4em 1.4em !important;
		margin: 0 0 1.5em 0 !important;
		-webkit-box-shadow:  0px 0px 0px 0px #000;
				box-shadow:  0px 0px 0px 0px #000;
	}
    legend.fieldset-border {
        font-size: 1.2em !important;
        font-weight: bold !important;
        text-align: left !important;
        width:auto;
        padding:0 10px;
        border-bottom:none;
    }
</style>
<script type="text/javascript">
var rekap_edit;
var rekap_delete;
$(document).ready(function(){
/* Start Variable Declaration */
    var rekap_expander=$('#rekap_expander');
    var rekap_print=$("#rekap_print");
    var rekap_excel=$("#rekap_excel");
/* Form Component Declaration */
    rekap_expander.jqxExpander({width: '100%', theme : global_theme, toggleMode : 'none', expanded : true});
    
	$("#rekap_jenjang_id").jqxComboBox({
        width: 200,
        height: 25,
		autoDropDownHeight : true,
		selectedIndex: 0,
        source: new Array('SD','SMP','SMA','SMK')
    });
	$("#rekap_sekolah_id").jqxComboBox({
        width: 200,
        height: 25,
		autoDropDownHeight : true,
        displayMember: "sekolah_nama",
        valueMember: "sekolah_id",
		placeHolder: "Semua",
        source: new $.jqx.dataAdapter({
            datatype: "json",
            root : 'results',
            datafields: [
                { name: 'sekolah_id' },
                { name: 'sekolah_nama' }
            ],
            url: "index.php/c_rekap/get_list_sekolah"
        })
    });
	$("#rekap_level_id").jqxComboBox({
        width: 200,
        height: 25,
		autoDropDownHeight : true,
        displayMember: "level_nama",
        valueMember: "level_id",
		placeHolder: "Semua",
        source: new $.jqx.dataAdapter({
            datatype: "json",
            root : 'results',
            datafields: [
                { name: 'level_id' },
                { name: 'level_nama' }
            ],
            url: "index.php/c_level/get_list"
        })
    });
	$("#rekap_jenis").jqxComboBox({
        width: 200,
        height: 25,
		autoDropDownHeight : true,
		selectedIndex: 0,
        source: new Array('Rekap','Detail')
    });
	$("#rekap_tanggal").jqxDateTimeInput({ height: '25px', formatString : 'dd-MM-yyyy' });
	$("#rekap_tanggal_akhir").jqxDateTimeInput({ height: '25px', formatString : 'dd-MM-yyyy' });
	
    rekap_print.jqxButton();
    rekap_print.bind('click', function(e){ rekap_print_form(e, 'print'); });
    rekap_excel.jqxButton();
    rekap_excel.bind('click', function(e){ rekap_print_form(e, 'excel'); });
/* Function Declaration */
    function rekap_print_form(e, type){
        e.preventDefault();
        var params = new Object();
        params.form_data=$('#rekap_form').serializeObject();
		params.form_data.type=type;
		params.form_data.rekap_jenjang_id=$("#rekap_jenjang_id").jqxComboBox('val');
		params.form_data.rekap_level_id=$("#rekap_level_id").jqxComboBox('val');
		params.form_data.rekap_sekolah_id=$("#rekap_sekolah_id").jqxComboBox('val');
		params.form_data.rekap_tanggal=$("#rekap_tanggal").jqxDateTimeInput('val');
		params.form_data.rekap_tanggal_akhir=$("#rekap_tanggal_akhir").jqxDateTimeInput('val');
		params.form_data.rekap_jenis=$("#rekap_jenis").jqxComboBox('val');
        params=JSON.stringify(params);
        $.ajax({
            url : 'c_rekap/export_rekap',
            method : 'post',
            data : {params:params},
            success : function(response){
                if(type == 'print'){
					window.open('temp/' + response + '.html');
				}else{
					window.open('temp/' + response + '.xls');
				}
            }
        });
    }
});
</script>
<div>
    <div id="rekap_expander" style="padding-bottom : 10px;">
        <div>Rekap</div>
        <div>
            <form class="form-horizontal" id="rekap_form" style="padding:10px;overflow:hidden;">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Jenjang</label>
                    <div class="col-sm-4"><div name="rekap_jenjang_id" id="rekap_jenjang_id"></div></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Nama Sekolah</label>
                    <div class="col-sm-4"><div name="rekap_sekolah_id" id="rekap_sekolah_id"></div></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Level</label>
                    <div class="col-sm-4"><div name="rekap_level_id" id="rekap_level_id"></div></div>
                </div>
				<fieldset class="fieldset-border">
					<legend class="fieldset-border">Periode</legend>
					<div class="form-group">
						<label class="col-sm-2 control-label">Tanggal Awal</label>
						<div class="col-sm-4"><div name="rekap_tanggal" id="rekap_tanggal"></div></div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">Tanggal Akhir</label>
						<div class="col-sm-4"><div name="rekap_tanggal_akhir" id="rekap_tanggal_akhir"></div></div>
					</div>
				</fieldset>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Jenis Rekap</label>
                    <div class="col-sm-4"><div name="rekap_jenis" id="rekap_jenis"></div></div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-4 text-center">
                        <button type="button" id="rekap_print">Cetak</button>
                        <button type="button" id="rekap_excel">Export Excel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>